<template>
	<div class="h_container">
		<!-- 占位/ -->
		<h1 class="h_title" />
		<!-- 占位/ -->
		<h1 class="bg h_title">仓储管理系统-数据大屏看板</h1>
		<div class="h_title">
			<div class="h_time">
				<i class="el-icon-switch-button" style="cursor: pointer;font-size: 16px" @click="$router.back()" >退出看板</i>
			</div>
			<div class="h_time">
				<span>2022年04月22日</span>
				<span>09:24</span>
				<span>星期七</span>
			</div>
		</div>
	</div>
</template>

<script>
    export default {
        name: "Header",
    };
</script>

<style lang="less" scoped>
	.h_container {
		height: 0.9375rem;
		background: linear-gradient(90deg, #000000 -20%, #3836c0 50%, #000000 120%);
		display: flex;
		justify-content: space-around;
		.bg{
			background: url(../assets/images/bg.png) no-repeat;
		}
		.h_title {
			width: calc(100% / 3);
			font-size: 0.375rem;
			text-align: center;
			line-height: 2.5;
			white-space: nowrap;
			color: #6666ff;
			.h_time {
				width: 50%;
				text-align: left;
				font-size: 0.25rem;
				color: #fff;
				box-sizing: border-box;
				padding: 0 0.25rem;
				i::before {
					font-size: 0.3125rem;
					margin-right: .0625rem;
					vertical-align: middle;
				}
			}
			.h_time:last-child {
				font-size: 0.25rem;
				display: flex;
				justify-content: space-between;
			}
		}
		.h_title:last-child {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
		}
	}
</style>
